<script lang="ts" setup>
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const props = defineProps({
    //子组件接收父组件传递过来的值
    ruleForm: Object,
    disabled: Boolean
})
const { ruleForm } = props as any
    
const rules = reactive<FormRules>({
    c_username: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 2, max: 16, message: '长度为2~16位', trigger: 'blur' },
    ],
    c_email: [
        {
            required: true,
            message: '请填写邮箱',
            trigger: 'change',
        }],
    c_content: [
        {
            required: true,
            message: '请填写内容',
            trigger: 'blur',
        }],
})
const emits = defineEmits(["submitForm", ]);   //定义一个变量来接收父组件传来的方法
const submitForm = (ruleFormRef: any) => {
    emits('submitForm', ruleFormRef)
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<template>
    <div class="padding ">
        <el-card class="box-card ">

            <el-form :inline="true" ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
                class="demo-ruleForm radius" :size="formSize" status-icon>
                <div class="toobarbox">


                    <el-form-item class="toobar" prop="c_username">
                        <el-input v-model="ruleForm.c_username" placeholder="昵称" />
                    </el-form-item>
                    <el-form-item class="toobar" prop="c_email">
                        <el-input v-model="ruleForm.c_email" placeholder="邮箱" />
                    </el-form-item>
                    <el-form-item class="toobar" prop="c_blog">
                        <el-input v-model="ruleForm.c_blog" placeholder="博客地址（非必填）" />
                    </el-form-item>
                </div>
                <el-form-item class="block" prop="c_content">
                    <el-input v-model="ruleForm.c_content" type="textarea" placeholder="求各位大佬别攻击本小破站了！" />
                </el-form-item>
                <div class="btnbox">
                    <el-form-item class="btn">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">回复</el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </div>

            </el-form>


        </el-card>
    </div>
</template>



<style lang="scss" scoped>
.padding {
    margin: 24px 30px;
}

.box-card {
    box-shadow: 0 0px 0px 0;
}

.toobar {
    width: 31%;
}

.block {
    display: block;
}

.btnbox {
    display: flex;
    justify-content: flex-end;

    .btn {
        margin-bottom: 0;

        .el-button+.el-button {
            margin-left: 0;
        }

    }
}

:deep(.el-form--inline .el-form-item) {
    margin-right: 0;
}

.demo-ruleForm {



    .toobarbox {
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (max-width: 800px) {
    .block,
    .toobar {
        width: 100%;
    }

    .toobarbox {
        display: flex;
        flex-direction: column;
    }
    .box-card{
        --el-card-padding: 10px;
}
}
</style>